<template>
    <div class="w-full h-full">
        <!-- {{ data }} -->
        <!-- <el-table v-if="data" :data="data">
            <el-table-column>
                <template #default="scope">
                    <div>
                        <span>{{ scope.row.name }}</span>
                        <span>
                            <img :src="scope.row.artists[0].img1v1Url" />
                        </span>
                    </div>
                </template>
            </el-table-column>
        </el-table> -->

        <div class="w-full h-full grid grid-cols-3 gap-3" v-if="data">
            <div class="w-full h-full" v-for="item in data">
                <SongCard :name="item.song_name" :id="item.song_id" :url="item.song_url" :pic="item.song_pic" />
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router';
import { api } from '@/boot/requests';
import { useAudioPlayListStore, player as playerRef } from '@/stores/counter';
import { getMusicUrl, getSongDetails } from '@/boot/requests';
import axios from 'axios';
import SongCard from '@/components/SongCard.vue';
import { ElLoading } from 'element-plus'

const audioPlay = useAudioPlayListStore()
const route = useRoute()

let query = route.query.q
watch(() => route.query.q, (newVal, oldVal) => {
    search(newVal)
})
const data = ref([])

const search = async (q) => {
    const loading = ElLoading.service({ fullscreen: true, text: '加载中....', background: 'rgba(0, 0, 0, 0.7)' })
    axios.get('http://localhost:8000/search?keywords=' + q).then(res => {
        data.value = res.data.data
        loading.close()
    })

}
search(query)
const play = (item, index) => {
    getSongDetails(item.id).then(res => {
        let data = res.data
        let url = data.data.url
        let name = data.data.name
        let pic = data.data.pic
        console.log(data)
        playerRef.value.pause()
        audioPlay.setAudioPlayList([{
            name: item.name,
            url: url,
            song_id: item.id
        }])
        playerRef.value.play()
    })
}
</script> 
 
<style scoped></style>